<template>
	<view class="page">
		<view class="swiper-wrap">
			<swiper class="swiper" circular :autoplay="true" :interval="3000" :duration="1000" @change="changeSwiper">
				<swiper-item
					v-for="(item,index) in swiperList"
					:key="index"
				>
					<view class="swiper-item"><image :src="item.img" mode="aspectFill"></image></view>
				</swiper-item>
			</swiper>
			<view class="swiper-dots">
				<view 
					class="swiper-dot"
					:class="{active: curentIndex === index}"
					v-for="(item,index) in swiperList"
					:key="index"
				></view>
			</view>
		</view>
	
		<view class="common_tit-wrap tp-w690">
			<view class="l-wrap">安全指南</view>
			<view class="r-wrap"></view>
		</view>
		
		<view class="list">
			<view 
				class="item tp-w690"
				v-for="(it_guide,in_guide) in list"
				:key="in_guide"
				@click="handleGoSecurityCenterDetail(it_guide.id)"
			>
				<view class="img"><image :src="it_guide.img" mode="aspectFill"></image></view>
				<view class="r-wrap">
					<view class="tit">{{it_guide.title}}</view>
					<view class="desc">{{it_guide.tag}}</view>
					<view class="date">{{it_guide.time}}</view>
				</view>
			</view>
		</view>
		
		<view class="hover_btn" @click="handleGoEmergencyContact"><image src="../static/imgs/icons/emergency-icon.png" mode=""></image></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curentIndex: 0,
				swiperList: [],
				list: []
			};
		},
		onLoad() {
			this.getSecurityInfo()
		},
		methods:{
			changeSwiper(e) {
				this.curentIndex  = e.detail.current
			},
			// 紧急联系人
			handleGoEmergencyContact() {
				uni.navigateTo({
					url: '/pagesTravel/emergencyContactList'
				});
			},
			handleGoSecurityCenterDetail(id) {
				uni.navigateTo({
					url: './securityCenterDetail?id=' + id
				});
			},
			getSecurityInfo() {
				this.$http.get(this.$api.getSecurityCenter).then(res => {
					if (res.code === 200) {
						this.swiperList = res.data.banner
						this.list = res.data.securityList
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {	background-color: #fff;
	min-height: 100vh;}
.swiper-wrap {
	position: relative;
	.swiper {
		height: 320rpx;
		margin: 0 auto;
		overflow: hidden;
	}
	.swiper-dots {
		position: absolute;
		bottom:20rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		.swiper-dot {
			width: 32rpx;
			height: 6rpx;
			border-radius: 3rpx;
			background-color: #ccc;
			float: left;
			margin-right: 10rpx;
			&:last-child {
				margin-right: 0;
			}
			&.active {
				background-color: #fff;
			}
		}
	}
}

.common_tit-wrap {
	font-size: 30rpx;
	margin: 30rpx auto 0;
}

.list {
	.item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #ebebeb;
		.img {
			width: 200rpx;
			height: 148rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-right: 30rpx;
		}
		.r-wrap {
			width: 460rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.tit {
				font-size: 28rpx;
				font-weight: 500;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 460rpx;
				overflow: hidden;
			}
			.desc {
				font-size: 26rpx;
				color:#666;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 460rpx;
				overflow: hidden;
			}
			.date {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
.hover_btn {
	height: 124rpx;
	width: 124rpx;
	border-radius: 50%;
	position: fixed;
	bottom: 140rpx;
	right: 30rpx;
}
</style>
